import React from 'react';
import styles from './index.less';
import diagGraph from './diagGraph';

import Menu from './Menu';

export default class extends React.Component {
  state = {
    width: 1000,
    height: 1000,
    show: true,
  };
  componentDidMount = () => {
    var obj = {
      // width: $(this.dom).width(),
      // height: $(this.dom).height(),
      // show: true,
    };
    this.setState(obj, () => {
      this.initSvg();
    });
  };
  initSvg = () => {
    var state = [
      { id: 1, label: 'V1\n数据同步', class: 'type-suss' },
      { id: 2, label: 'V2\nhive-sql', class: 'type-suss' },
      { id: 3, label: 'V3\nspark-sql', class: 'type-init' },
      { id: 4, label: 'V4\nshell', class: 'type-ready' },
      { id: 5, label: 'V5\npython', class: 'type-fail' },
      { id: 6, label: 'V6\n虚节点', class: 'type-suss' },
      { id: 7, label: 'V7\nspark-sql', class: 'type-suss' },
      { id: 8, label: 'V8\nshell', class: 'type-freeze' },
      { id: 9, label: 'V9\n数据同步', class: 'type-suss' },
      { id: 10, label: 'V10\nshell', class: 'type-queue' },
      { id: 11, label: 'V11\nspark-sql', class: 'type-run' },
      { id: 12, label: 'V12\nspark-sql', class: 'type-suss' },
      { id: 13, label: 'V13\n虚节点', class: 'type-init' },
      { id: 14, label: 'V14\n数据同步', class: 'type-fail' },
      { id: 0, label: 'V15\nhive-sql', class: 'type-freeze' },
    ];
    var edg = [
      { start: 1, end: 4, option: {} },
      { start: 1, end: 3, option: {} },
      { start: 1, end: 2, option: {} },
      { start: 6, end: 7, option: {} },
      { start: 5, end: 6, option: {} },
      { start: 9, end: 10, option: {} },
      { start: 8, end: 9, option: {} },
      { start: 11, end: 12, option: {} },
      { start: 8, end: 11, option: {} },
      { start: 5, end: 8, option: {} },
      { start: 1, end: 5, option: {} },
      { start: 13, end: 14, option: {} },
      { start: 1, end: 13, option: {} },
      { start: 0, end: 1, option: {} },
    ];
    var statePoint = 1; // 当前选中的点
    diagGraph.init(statePoint, state, edg); //创建关系图

    var svgCanvas = document.getElementById('svgCanvas'); //绑定事件鼠标点击
    svgCanvas.addEventListener('click', function(e) {
      e.preventDefault();
      if (e.target.tagName === 'rect') {
        var id = e.target.parentNode.id; //选中的id
        diagGraph.changePoint(e.target.parentNode.id);
      }
    });

    var myMenu = document.getElementById('myMenu'); //鼠标右键
    svgCanvas.addEventListener('contextmenu', event => {
      //鼠标右击事件
      event.preventDefault();
      if (event.target.tagName === 'rect') {
        myMenu.style.top = event.clientY + 'px';
        myMenu.style.left = event.clientX + 'px';
        myMenu.style.display = 'block';
        // this.myMenuShow = true

        this.currentRightId = event.target.parentNode.id;
      }
    });
    document.addEventListener('click', event => {
      myMenu.style.display = 'none';
    });
  };
  render() {
    const { width, height, show } = this.state;
    return (
      <div className={styles.container} ref={dom => (this.dom = dom)}>
        {show && <svg id="svgCanvas" width={width} height={height}></svg>}
        <div id="myMenu">
          <Menu
            menuList={[
              { title: '重命名', key: 'updateNodeTitle' },
              { title: '移动', key: 'mobileNode' },
              { title: '删除', key: 'deleteNode' },
            ]}
            onChange={item => {
              var id = this.currentRightId;
            }}
          />
        </div>
      </div>
    );
  }
}
